import { useState } from "react";
import Child from "./component/child";
import Next from "./component/next";
import Son from "./component/son";
import DataContext from "./contex";

function App() {
  const list = [
    { id: 1, name: "vue" },
    { id: 2, name: "react" },
  ];
  const isShow = false;
  const dd = 1;

  function getComplexdDom() {
    if (dd === 1) {
      return <div>情况1</div>
    } else {
      return <div>其他情况</div>
    }
  }

  const handleClick = (e) => {
    console.log(this) //输出为undefined，函数式组件中没有this
    console.log('点击1', e)
  }

  const handleClick1 = (data) => {
    console.log('点击2', data)
  }

  const handleClick2 = (data, e) => {
    console.log('点击3', data, e)
  }

  const [mess, setMess] = useState('')
  const getSonInfo = (data) => {
    setMess(data)
    console.log('父组件中：子组件给父组件传递值', data)
  }

  return (
    <div className="App">
      <h4 style={{ color: "blue" }}>我是父组件:条件渲染，循环渲染，事件绑定</h4>
      <span style={{ color: 'red' }}>{mess}</span>
      {/* 1...简单条件渲染 */}
      {isShow ? <div>显示</div> : <div>不显示</div>}
      {/* 1.1...复杂条件渲染 */}
      {getComplexdDom()}
      {/* 2...循环渲染 */}
      <ul>
        {list.map((item) => {
          return <li key={item.id}>{item.name}</li>;
        })}
      </ul>
      {/* 3...绑定事件并且传递事件对象e */}
      <button onClick={handleClick}>点击1</button>
      {/* 注意：这里的事件名称不能加括号，加了就只调用一次，后面就是undefined了 */}
      {/* 3.1...绑定事件并且传递参数 */}
      <button onClick={() => handleClick1('jake')}>点击2</button>
      {/* 3.2...绑定事件并且传递参数并且传递事件对象e */}
      <button onClick={(e) => handleClick2('tom', e)}>点击3</button>

      <DataContext.Provider value="给儿子的数据">
        <Child />
      </DataContext.Provider>

      <Next />

      <Son message="你好小组件" data={{ name: '王洪刚', age: 18 }} getSonInfo={getSonInfo}>
        <span>来自父组件的元素，类似于vue的插槽</span>
      </Son>
    </div>
  );
}

export default App;
